<template>
    <div class="power-management">
        <h1>权限管理</h1>
        <div class="search-container">
            <el-input
              placeholder="搜索用户"
              v-model="searchQuery"
              class="input-with-select"
            >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <el-table
          :data="filteredUsers"
          style="width: 100%"
          v-loading="loading"
        >
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="role" label="角色"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                      type="primary"
                      @click="editUser(scope.row)"
                    >编辑</el-button>
                    <el-button
                      type="danger"
                      @click="deleteUser(scope.row.id)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="users.length"
        >
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'PowerManagement',
    data() {
        return {
            users: [], // 假设从API获取用户数据
            searchQuery: '',
            currentPage: 1,
            loading: false,
        };
    },
    computed: {
        filteredUsers() {
            if (!this.searchQuery) {
                return this.users;
            }
            return this.users.filter(user =>
                user.name.includes(this.searchQuery) || user.role.includes(this.searchQuery)
            );
        },
    },
    methods: {
        fetchUsers() {
            this.loading = true;
            // 模拟API请求
            setTimeout(() => {
                this.users = [
                    { id: 1, name: 'Alice', role: '管理员' },
                    { id: 2, name: 'Bob', role: '用户' },
                    { id: 3, name: 'Jone', role: '用户' },
                    { id: 4, name: 'Bill', role: '用户' },
                    { id: 5, name: 'Bell', role: '用户' },
                    { id: 6, name: 'Slada', role: '用户' },
                    { id: 7, name: 'Box', role: '用户' },
                    { id: 8, name: 'Cile', role: '用户' },
                    { id: 9, name: 'Slada', role: '用户' },
                    { id: 10, name: 'Boex', role: '用户' },
                    { id: 11, name: 'Slademeda', role: '用户' },
                    { id: 12, name: 'Platea', role: '用户' },
                ];
                this.loading = false;
            }, 1500);
        },
        editUser(user) {
            // 编辑用户逻辑
            console.log('编辑用户:', user);
        },
        deleteUser(userId) {
        // 确认删除的提示，Element UI 的 MessageBox 组件
        this.$confirm('确定要删除此用户吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            // 执行删除操作
            this.users = this.users.filter(user => user.id !== userId);
            this.$message.success('用户删除成功');
        }).catch(() => {
            // 用户取消删除
            this.$message.info('已取消删除');
        });
    },
        handleCurrentChange(val) {
            this.currentPage = val;
            // 可以在这里添加分页逻辑
        },
    },
    mounted() {
        this.fetchUsers();
    }
};
</script>

<style scoped>
.power-management {
    padding: 20px;
    text-align: center;
}

.search-container {
    margin-bottom: 20px;
}

/* 其他样式... */
</style>